<script setup lang="ts">
import { ref } from 'vue'
import { Carousel } from '@ark-ui/vue/carousel';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const { $fetch } = useFetch();
const templates = import.meta.glob('/src/common/components/activity-template/*/index.vue', {
  eager: true,
  import: 'default',
}) as Record<string, any>;

const { data: listing } = useAsyncData(
  'home:tempalte3:event',
  () => $fetch('/activity/list'),
);

const status: Record<number, string> = {
  1: t('home.home.event.status1'),
  2: t('home.home.event.status2'),
  3: t('home.home.event.status3'),
};
const index = ref(0)
</script>

<template>
  <div class="h-492 overflow-hidden bg-[url(@/home/assets/home/calendar.png)] bg-cover pt-48">
    <div class="container">
      <div class="relative w-1328 overflow-hidden">
        <Carousel.Root id="page-template3-event" v-model:page="index" orientation="horizontal" :slides-per-page="5" :slides-per-move="1" spacing="32px" class="h-full" v-if="listing?.length">
          <div class="h-60 flex gap-x-32">
            <h3 class="text-40 text-[#fff] font-500 leading-60">{{ $t('home.home.event.title') }}</h3>
            <Carousel.Control class="flex-y-center gap-16">
              <Carousel.PrevTrigger class="bg-transparent">
                <div class="i-icons:arrow-left-3 size-32 text-[#fff]" :class="[index === 0 ? 'opacity-20' : 'opacity-100']"></div>
              </Carousel.PrevTrigger>
              <Carousel.NextTrigger :disabled="listing?.length - index <= 5" class="bg-transparent" :class="[listing?.length - index <= 5 ? 'opacity-20' : 'opacity-100']">
                <div class="i-icons:arrow-right-3 size-32 text-[#fff]"></div>
              </Carousel.NextTrigger>
            </Carousel.Control>
          </div>
          <Carousel.ItemGroup>
            <Carousel.Item
              v-for="(item, idx) in listing"
              :key="idx"
              :index="idx"
              class="mt-48 w-240 duration-300"
              :class="[ idx === index + 3 ? 'opacity-60' : 'opacity-100', idx >= index + 4 ? 'opacity-20' : 'opacity-100']"
            >
              <div class="flex-y-center justify-between">
                <span class="text-12 text-[#fff] font-400 leading-20 opacity-60">{{ item.createTime }}</span>
                <span class="text-12 text-[#ffcd27] font-400 leading-20">{{ status[item.status] }}</span>
              </div>
              <p class="line-clamp-1 mt-16 text-left text-14 text-[#fff] font-400 leading-20 opacity-80">{{ item.atName }}</p>
              <img :src="item.atUrl" class="mt-16 block h-144 w-240 border-2 border-[#fff] object-cover" :alt="item.atName" v-if="item?.atUrl">
              <Component
                class="mt-16 h-144 w-240 text-14 leading-20"
                :is="templates[`/src/common/components/activity-template/${item.atTemplate}/index.vue`]"
                :title="item.atName"
                v-else-if="item?.atTemplate && templates[`/src/common/components/activity-template/${item.atTemplate}/index.vue`]"
              />
              <div class="flex translate-y--16 justify-center">
                <a :href="item.jumpUrl" target="_blank" class="line-clamp-1 block h-32 max-w-160 truncate rounded-20 bg-[#ffcd27] px-36 text-center text-12 text-[#000] font-400 leading-32">
                  {{ item.buttonText ? item.buttonText : $t('home.home.event.detail') }}
                </a>
              </div>
            </Carousel.Item>
          </Carousel.ItemGroup>
        </Carousel.Root>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
